<template>
	<div class="home">
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			<el-container>
				<el-aside :width="changecollapse">
					<Aside></Aside>
				</el-aside>
				<el-main>
					<Main></Main>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Header from '../components/Header.vue'
	import Aside from '../components/Aside.vue'
	import Main from '../components/Main.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: 'Home',
		data() {
			return {
				bran: [],
				isCollapse: false
			}
		},
		components: {
			Header,
			Aside,
			Main
		},
		mounted() {
			this.$bus.$on('collapseaside', (isCollapseq) => {
					this.isCollapse = isCollapseq
				})
				 this.getbreadcrumb() 
		},
		computed: {
			...mapState(['user','slideMenus']),
			changecollapse() {
				return this.isCollapse ? '52px' : '200px'
			},
		},
		// 对路由变化作出响应...
		watch: {
			$route(to, from) {

				 this.getbreadcrumb() 
			}
		},
		methods: {
			...mapMutations(['addBread']),
			/* 面包屑导航 */
			 getbreadcrumb() {
				var getobj = this.$route.matched.filter(v => v.name)
				let arr = []
				getobj.forEach(v => {
					if (v.name === 'welcome' || v.name === 'Home') {
						return
					}
					arr.push({
						name: v.name,
						path: v.path,
						 title: v.meta.title 
					})
					this.slideMenus.forEach(item => {
						if (item.children) {
							item.children.filter(i => i.key == v.path).length > 0 ? arr.unshift({title: item.title}) : arr
						}
					})
				})
				if (arr.length > 0) {
					arr.unshift({
						name: 'Home',
						path: '/',
						title: '后台首页' 
					})
				}
				this.bran = arr
				this.addBread(this.bran)
			} 
		}
	}
</script>
<style scoped>
	.el-header {
		background-color: #333;
		color: #333;
		text-align: center;
	}

	.el-container {
		height: 100%;
	}
</style>
